<template>
  <div>
    <h3>域名引流规则</h3>
    <el-table :data="redirectRules" border style="width: 100%">
      <el-table-column prop="domain" label="域名"></el-table-column>
      <el-table-column prop="sourceIp" label="来源IP"></el-table-column>
      <el-table-column prop="requestTime" label="请求时间"></el-table-column>
      <el-table-column prop="responsePolicy" label="应答策略"></el-table-column>
      <el-table-column prop="targetIp" label="目标IP"></el-table-column>
      <el-table-column fixed="right" label="操作" width="120">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="openEditDialog(scope.row)">编辑</el-button>
          <el-button type="text" size="small" @click="deleteRule(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-button type="primary" size="small" style="margin-top: 20px;" @click="openAddDialog">新增规则</el-button>

    <!-- Add Rule Dialog -->
    <el-dialog title="新增规则" :visible.sync="dialogVisible.add" width="50%">
      <el-form ref="addForm" :model="newRule" :rules="rules" label-width="120px">
        <el-form-item label="域名" prop="domain">
          <el-input v-model="newRule.domain"></el-input>
        </el-form-item>
        <el-form-item label="来源IP" prop="sourceIp">
          <el-input v-model="newRule.sourceIp"></el-input>
        </el-form-item>
        <el-form-item label="请求时间" prop="requestTime">
          <el-input v-model="newRule.requestTime"></el-input>
        </el-form-item>
        <el-form-item label="应答策略" prop="responsePolicy">
          <el-input v-model="newRule.responsePolicy"></el-input>
        </el-form-item>
        <el-form-item label="目标IP" prop="targetIp">
          <el-input v-model="newRule.targetIp"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible.add = false">取 消</el-button>
        <el-button type="primary" @click="submitAddForm">确 定</el-button>
      </span>
    </el-dialog>

    <!-- Edit Rule Dialog -->
    <el-dialog title="编辑规则" :visible.sync="dialogVisible.edit" width="50%">
      <el-form ref="editForm" :model="editingRule" :rules="rules" label-width="120px">
        <el-form-item label="域名" prop="domain">
          <el-input v-model="editingRule.domain"></el-input>
        </el-form-item>
        <el-form-item label="来源IP" prop="sourceIp">
          <el-input v-model="editingRule.sourceIp"></el-input>
        </el-form-item>
        <el-form-item label="请求时间" prop="requestTime">
          <el-input v-model="editingRule.requestTime"></el-input>
        </el-form-item>
        <el-form-item label="应答策略" prop="responsePolicy">
          <el-input v-model="editingRule.responsePolicy"></el-input>
        </el-form-item>
        <el-form-item label="目标IP" prop="targetIp">
          <el-input v-model="editingRule.targetIp"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible.edit = false">取 消</el-button>
        <el-button type="primary" @click="submitEditForm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: ['redirectRules'],
  data() {
    return {
      dialogVisible: {
        add: false,
        edit: false
      },
      newRule: {
        domain: '',
        sourceIp: '',
        requestTime: '',
        responsePolicy: '',
        targetIp: ''
      },
      editingRule: {},
      rules: {
        domain: [
          { required: true, message: '请输入域名', trigger: 'blur' }
        ],
        sourceIp: [
          { required: true, message: '请输入来源IP', trigger: 'blur' },
          { pattern: /^(\d{1,3}\.){3}\d{1,3}$/, message: '请输入有效的IP地址', trigger: 'blur' }
        ],
        requestTime: [
          { required: true, message: '请输入请求时间', trigger: 'blur' }
        ],
        responsePolicy: [
          { required: true, message: '请输入应答策略', trigger: 'blur' }
        ],
        targetIp: [
          { required: true, message: '请输入目标IP', trigger: 'blur' },
          { pattern: /^(\d{1,3}\.){3}\d{1,3}$/, message: '请输入有效的IP地址', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    openAddDialog() {
      this.dialogVisible.add = true;
      this.newRule = {
        domain: '',
        sourceIp: '',
        requestTime: '',
        responsePolicy: '',
        targetIp: ''
      };
    },
    submitAddForm() {
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          this.$emit('add-rule', { ...this.newRule });
          this.dialogVisible.add = false;
        } else {
          this.$message({
            type: 'error',
            message: '请检查表单填写是否正确'
          });
          return false;
        }
      });
    },
    openEditDialog(rule) {
      this.dialogVisible.edit = true;
      this.editingRule = { ...rule };
    },
    submitEditForm() {
      this.$refs.editForm.validate((valid) => {
        if (valid) {
          this.$emit('edit-rule', { ...this.editingRule });
          this.dialogVisible.edit = false;
        } else {
          this.$message({
            type: 'error',
            message: '请检查表单填写是否正确'
          });
          return false;
        }
      });
    },
    deleteRule(id) {
      this.$emit('delete-rule', id);
    }
  }
};
</script>

<style scoped lang="scss">
h3 {
  margin-bottom: 20px;
}

.el-dialog {
  .el-form {
    .el-form-item {
      margin-bottom: 15px;
    }
  }
}
</style>
